<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/lib/font-awesome-4.7.0/css/font-awesome.min.css"
          media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css" media="all">
<body>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main width_60">
        <form class="layui-form">
            <input type="hidden" name="orderID" value="${orders.orderID}">
            <div class="layui-form-item">
                <label class="layui-form-label"> 车次</label>
                <div class="layui-input-block">
                    <select name="trainID" lay-filter="trainID" lay-verify="required">
                        <option value="">请选择</option>
                        <c:forEach items="${trains}" var="item">
                            <option value="${item.trainID}"
                                    <c:if test="${tickets.trainID==item.trainID}">selected</c:if> >${item.trainNumber}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 乘车日期</label>
                <div class="layui-input-block">
                    <select id="journeyID" name="journeyID" lay-filter="journeyID" lay-verify="required">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 乘车站</label>
                <div class="layui-input-block">
                    <select id="ticketID" name="ticketID" lay-filter="ticketID" lay-verify="required">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 乘车人</label>
                <div class="layui-input-block">
                    <input type="text" name="fullName" value="${orders.fullName}" lay-verify="required"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 身份证号</label>
                <div class="layui-input-block">
                    <input type="text" name="iDNumber" value="${orders.iDNumber}" lay-verify="required"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" value="${orders.phone}" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 票价</label>
                <div class="layui-input-block">
                    <input id="totalPrice" type="text" name="totalPrice" value="${orders.totalPrice}"
                           lay-verify="required"
                           class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-primary layui-btn-sm data-add-btn">
                        <i class="fa fa-refresh"></i>
                        重置
                    </button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-submit lay-filter="save">
                        <i class="fa fa-save"></i>
                        保存
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="${pageContext.request.contextPath}/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/static/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    layui.use(['form', 'jquery'], function () {
        var form = layui.form,
            $ = layui.jquery;

        //获取窗口索引
        var index = parent.layer.getFrameIndex(window.name);
        //监听提交
        form.on('submit(save)', function (data) {
            $.ajax({
                url: "${pageContext.request.contextPath}/orders/saveOrUpdate",
                type: "POST",
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(data.field),
                success: function (data) {
                    layer.msg(data.msg, {time: 500}, function () {
                        parent.layer.close(index);
                    });
                }
            });
            return false;
        });

        form.on('select(trainID)', function (data) {
            var value = data.value; // 获得被选中的值
            if (value != "") {
                $.ajax({
                    url: "${pageContext.request.contextPath}/tickets/findByTrainID",
                    type: "GET",
                    contentType: 'application/json',
                    dataType: 'json',
                    data: {trainID: value},
                    success: function (data) {
                        var html = "<option value=''>请选择</option>";
                        data.tickets.forEach(function (item) {
                            html += '<option lay-data="' + item.price + '" value="' + item.ticketID + '">' + item.startStation + '~' + item.endStation + '</option>';
                        })
                        $("#ticketID").html(html)
                        form.render('select');
                    }
                });

                $.ajax({
                    url: "${pageContext.request.contextPath}/journeys/findByTrainID",
                    type: "GET",
                    contentType: 'application/json',
                    dataType: 'json',
                    data: {trainID: value},
                    success: function (data) {
                        var html = "<option value=''>请选择</option>";
                        data.journeys.forEach(function (item) {
                            html += '<option value="' + item.journeyID + '">' + item.departureTime + '</option>';
                        })
                        $("#journeyID").html(html)
                        form.render('select');
                    }
                });
            }
        });

        form.on('select(ticketID)', function (data) {
            $("#totalPrice").val($("#ticketID option:selected").attr('lay-data'))
        });

    });
</script>
</body>
</html>
